<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>网站设置</BreadcrumbItem>
        <BreadcrumbItem>轮播图管理</BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      <div class="head_style">
        <h2>轮播图管理</h2>
      </div>
        <br/>
      <div class="demo-upload-list" v-for="(item,index) of uploadList" :key="index">
          <!-- <template v-if="item.status === 'finished'"> -->
              <img :src="item.imgpath" >
              <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
          <!-- </template> -->
          <!-- <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
          </template> -->
      </div>
      <Upload
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png','gif']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"

          multiple
          type="drag"
          name="image"
          action="/admin/Website/sowingMap"
          style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
          </div>
      </Upload>
      <!-- 看大图 -->
      <Modal title="看大图" v-model="visible">
          <img :src="imgName" v-if="visible" style="width: 100%">
      </Modal>
    </Content>
  </div>
</template>

<script>
import bak from '@/assets/js/views/bak/sowing_map';

export default {
  ...bak,
};

</script>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 30%;
        /* height: 60px; */
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 50px;
        cursor: pointer;
        margin: 60px 40px;
    }
</style>

